<template>
	<view></view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style></style>
<template>
	<view class="">
		<view class="van-row">
			<view class="van-row-left ddtt">
				<u-icon name="checkmark-circle-fill" size="10" color="red"></u-icon>
				<view>30天无忧退货</view>
			</view>
			<view class="van-row-center ddtt">
				<u-icon name="checkmark-circle-fill" size="10" color="red"></u-icon>
				<view>48小时快速退费</view>
			</view>
			<view class="van-row-right ddtt">
				<u-icon name="checkmark-circle-fill" size="10" color="red"></u-icon>
				<view>满88元免邮费</view>
			</view>
		</view>
		<view class="detailBox">
			<view class="name">{{ detailInfo.name }}</view>
			<view class="brief">{{ detailInfo.goods_brief }}</view>
			<view class="price">{{ detailInfo.retail_price | priceFormat }}</view>
		</view>
		<view class="mycell">
			<view class="mycell-box" @tap="open">
				<view class="mycell-title">展示弹出层</view>
				<view class="mycell-jt"><u-icon name="arrow-right" size="20"></u-icon></view>
			</view>
		</view>
		<view class="parameter"><view>商品参数</view></view>
		<view class="commonProblem">
			<view class="commonProblem-title">常见问题</view>
			<view class="commonProblemBox" v-for="(item, index) in detailIssue" :key="index">
				<view class="commonProblemBox_problem">{{ item.question }}</view>
				<view class="commonProblemBox_text">{{ item.answer }}</view>
			</view>
			<view class="relatedGoods-title">相关产品</view>
			<view class="relatedGoodsBox">
				<view class="relatedGoodsList" v-for="(item, index) in goodsList" :key="index">
					<view class="relatedGoodsBox_img"><image :src="item.list_pic_url" mode="widthFix"></image></view>
					<view class="relatedGoodsBox_text">{{ item.name }}</view>
					<view class="relatedGoodsBox_price">{{ item.retail_price | priceFormat }}</view>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-popup :show="show" mode="bottom" @close="close" @open="open" :closeable="true" :safeAreaInsetBottom="true">
			<view class="toBuyCar">
				<view class="toBuyCarBox">
					<view class="toBuyCarImg"><image :src="detailInfo.list_pic_url" mode="widthFix"></image></view>
					<view class="toBuyCarTxt">
						<view class="toBuyCarTxt-price">价格：{{ detailInfo.retail_price | priceFormat }}</view>
						<view class="toBuyCarTxt-stock">库存：{{ detailInfo.goods_number }}</view>
					</view>
				</view>
				<view class="toBuyCarQuantity">数量：</view>
				<view class="toBuyCarStepper"><u-number-box v-model="quantity" @change="ChangeQuantity"></u-number-box></view>
				<view class="tabbar">
					<u-tabbar :placeholder="false" :fixed="true" :safeAreaInsetBottom="false">
						<u-tabbar-item class="tabbarNav" text="收藏" icon="star"></u-tabbar-item>
						<u-tabbar-item class="tabbarNav" text="购物车" icon="shopping-cart" badge="1" @tap="toCar"></u-tabbar-item>
						<u-button class="BuyNow" text="立即购买"></u-button>
						<u-button class="join" text="加入购物车" @tap="joinCar"></u-button>
					</u-tabbar>
				</view>
			</view>
		</u-popup>
		<!-- 底部加入购物车等 -->
		<view class="tabbar">
			<u-tabbar :placeholder="false" :fixed="true" :safeAreaInsetBottom="false">
				<u-tabbar-item class="tabbarNav" text="收藏" icon="star"></u-tabbar-item>
				<u-tabbar-item class="tabbarNav" text="购物车" icon="shopping-cart" badge="1" @tap="toCar"></u-tabbar-item>
				<u-button class="BuyNow" text="立即购买"></u-button>
				<u-button class="join" text="加入购物车" @tap="show = true"></u-button>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
import { ApiDetails, ApiRelated } from '@/utils/api.js';
export default {
	data() {
		return {
			//  商品id
			goodsId: 0,
			// 加入购物车数量

			quantity: 1,
			// 产品信息
			detailInfo: [],
			// 产品参数
			detailAttribute: [],
			//
			productList: [],
			// 常见问题
			detailIssue: [],
			// 相关产品
			goodsList: [],
			show: false
		};
	},
	async onLoad(option) {
		// console.log(option);
		this.goodsId = option.id;
		let res = await ApiDetails(this.goodsId);
		let res2 = await ApiRelated(this.goodsId);
		let { info, attribute, issue, productList } = res.data;
		let { goodsList } = res2.data;
		this.detailInfo = info;
		this.detailAttribute = attribute;
		this.detailIssue = issue;
		this.goodsList = goodsList;
		console.log(res);
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		ChangeQuantity(e) {
			console.log('当前值为: ' + e.value);
		},
		// 添加到购物车
		joinCar() {
			console.log('加入成功');
		},
		// 跳转到购物车页面
		toCar() {
			console.log(123);
			uni.navigateTo({
				url: '/page/cart/cart'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #efefef;
}
.van-row {
	background-color: #fff;
	display: flex;
	font-size: 28rpx;
	justify-content: center;
	align-items: center;
	.van-row-left {
		padding-right: 26rpx;
	}
	.van-row-center {
		padding: 0 12rpx;
	}
	.van-row-right {
		padding-left: 26rpx;
	}
}
.detailBox {
	background-color: #fff;
	padding: 40rpx 0;
	text-align: center;
	border-bottom: 1px solid #666;
	.name {
		font-size: 40rpx;
		line-height: 80rpx;
	}
	.brief {
		line-height: 80rpx;
		font-size: 26rpx;
	}
	.price {
		line-height: 80rpx;
		font-size: 26rpx;
		color: var(--price-color);
	}
}

.mycell {
	background-color: #fff;
	.mycell-box {
		height: 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 32rpx;
		.mycell-title {
		}
		.mycell-jt {
		}
	}
}
.ddtt {
	display: flex;
}

.parameter {
	background-color: #fff;
	margin: 40rpx 0 20rpx 0;
	height: 80rpx;
	padding: 20rpx;

	view {
		font-size: 38rpx;
		line-height: 80rpx;
	}
}

.toBuyCar {
	height: 446rpx;
	padding: 20rpx;
}
.tabbar {
	.tabbarNav {
		width: 96rpx;
	}
	.BuyNow {
		margin: 10rpx auto;
		width: 268rpx;
		border: none;
		background-color: #f11a27;
		border-radius: 50rpx 0 0 50rpx;
		color: #fff;
	}
	.join {
		margin: 10rpx auto;
		width: 268rpx;
		border: none;
		background-color: #ff9118;
		border-radius: 0 50rpx 50rpx 0;
		color: #fff;
	}
}
.toBuyCar {
	.toBuyCarBox {
		display: flex;
		align-items: center;
		.toBuyCarImg {
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		.toBuyCarTxt {
			margin-left: 10rpx;
			width: 510rpx;
			height: 200rpx;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.toBuyCarTxt-price {
			}
			.toBuyCarTxt-stock {
			}
		}
	}
	.toBuyCarQuantity {
		font-size: 40rpx;
		margin: 20rpx 0;
	}
	.toBuyCarStepper {
		display: flex;
		text-align: center;
		button {
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
		}
		input {
			width: 64rpx;
			height: 56rpx;
		}
	}
}
.commonProblem {
	background-color: #fff;
	.commonProblem-title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 35rpx;
		text-align: center;
	}
	.commonProblemBox {
		padding: 0 20rpx 0 40rpx;
		.commonProblemBox_problem {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
		.commonProblemBox_text {
			font-size: 24rpx;
		}
	}
	.relatedGoods-title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 35rpx;
		text-align: center;
	}
	.relatedGoodsBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		padding-bottom: 160rpx;
		.relatedGoodsList {
			width: 50%;
			font-size: 24rpx;
			.relatedGoodsBox_img {
				width: 100%;
				image {
					width: 100%;
				}
			}
			.relatedGoodsBox_text {
			}
			.relatedGoodsBox_price {
				margin-top: 10rpx;
				color: var(--price-color);
			}
		}
	}
}
</style>
